<template>
	<div class="pagination">
		<button
			class="pagination__btn"
			@click="prev"
			:disabled="myCurrentPage <= 1">
			<span class="iconfont icon-arrow-left"></span>
		</button>
		<ul class="pagination__pager">
			<li
				:class="{
					'pagination__pager-number': true,
					active: myCurrentPage === 1,
				}"
				@click="goPage(1)">
				1
			</li>
			<li
				class="iconfont icon-ellipsis pagination__pager-number"
				v-if="startEnd.start >= 3"></li>
			<!-- 用最后的一个减去开头+1  就可以得到中间的按钮 -->
			<li
				:class="{
					'pagination__pager-number': true,
					active: myCurrentPage === startEnd.start + index,
				}"
				v-for="(num, index) in startEnd.end - startEnd.start + 1"
				:key="startEnd.start + index"
				@click="goPage(startEnd.start + index)">
				{{ startEnd.start + index }}
			</li>
			<li
				class="iconfont icon-ellipsis pagination__pager-number"
				v-if="startEnd.end <= totalPages - 2 && totalPages > 7"></li>
			<li
				:class="{
					'pagination__pager-number': true,
					active: myCurrentPage === totalPages,
				}"
				@click="goPage(totalPages)"
				v-if="totalPages >= 2">
				{{ totalPages }}
			</li>
		</ul>
		<button
			class="pagination__btn"
			@click="next"
			:disabled="myCurrentPage >= totalPages">
			<span class="iconfont icon-arrow-right"></span>
		</button>
		<select class="pagination__page-sizes" v-model="myPageSize">
			<option
				v-for="(pageSize, index) in pageSizes"
				:value="pageSize"
				:key="index">
				每页{{ pageSize }}条
			</option>
		</select>
		<span class="pagination__total">共{{ total }}条</span>
	</div>
</template>

<script>
export default {
	name: 'JPagination',
	data() {
		return {
			myCurrentPage: this.currentPage, // 当前页数
			myPageSize: this.pageSize, //每页展示多少条
		}
	},
	props: {
		// 当前页数
		currentPage: {
			type: Number,
			default: 1,
		},
		// 每页展示多少条
		pageSize: {
			type: Number,
			default: 5,
		},
		// 展示多少条的选项
		pageSizes: {
			type: Array,
			default: () => [5, 10, 15, 20],
		},
		// 总数量
		total: {
			type: Number,
			default: 0,
		},
	},
	computed: {
		// 总页数
		totalPages() {
			// 总数量/每页展示数量向上取整  = 总页数
			return Math.ceil(this.total / this.myPageSize)
		},
		// 中间按钮
		startEnd() {
			// 解构 当前页数  总页数
			const { myCurrentPage, totalPages } = this

			// 解决遍历负数bug：第一次遍历是总数是0，0-1 +1
			if (totalPages <= 2) {
				return {
					start: 1,
					end: 0,
				}
			}
			// 小于等于7个按钮
			if (totalPages <= 7) {
				return {
					start: 2,
					end: totalPages - 1,
				}
			}
			// 大于7个按钮
			let start = myCurrentPage - 2
			if (start < 2) start = 2
			let end = start + 4
			if (end > totalPages - 1) {
				end = totalPages - 1
				start = end - 4
			}

			return {
				start,
				end,
			}
		},
	},
	methods: {
		// 中间按钮点击
		goPage(newCurrentPage) {
			// 修改当前页数
			this.myCurrentPage = newCurrentPage
		},
		prev() {
			this.myCurrentPage--
		},
		next() {
			this.myCurrentPage++
		},
	},
	watch: {
		// 触发每页展示多少条
		myPageSize(myPageSize) {
			const { totalPages, myCurrentPage } = this
			// 当前展示页数 大于 总页数就等于总页数页码
			if (myCurrentPage > totalPages) {
				this.myCurrentPage = totalPages
			}
			// 触发自定义事件 传当前
			this.$emit('size-change', myPageSize)
		},
		// 触发当前页数
		myCurrentPage(currentPage) {
			this.$emit('current-change', currentPage)
		},
	},
}
</script>

<style lang="less" scoped>
.pagination {
	display: flex;
	justify-content: center;
}
.pagination__pager {
	display: flex;
	justify-content: center;
}
.pagination__pager-number,
.pagination__btn {
	width: 30px;
	height: 30px;
	background-color: #eaeaea;
	color: #333;
	font-weight: 700;
	text-align: center;
	line-height: 30px;
	margin: 0 5px;
	border-radius: 3px;
	cursor: pointer;
}
.pagination__btn {
	border: none;
	&:disabled {
		color: #c0c4cc;
		cursor: not-allowed;
	}
}
.active {
	color: #fff;
	background-color: #c81623;
}
.pagination__page-sizes {
	height: 30px;
	margin: 0 10px;
	border: 1px solid #eaeaea;
	outline: none;
}

.pagination__total {
	font-size: 14px;
	font-weight: 700;
	line-height: 30px;
}
</style>
